<style lang="scss" scoped>
@import './../css/index.scss';
</style>
<template>
  <div>
      <HeaderCompoent/>
      <div class="page">
          <div class="my-menu-list">
            <ul>
                <router-link to="detail/myMusic" tag="li">
                  <i class="iconfont icon-yinyue"></i>
                  <div class="menu-text">
                    我的音乐<span>（26）</span>
                  </div>
                </router-link>
                <router-link to="detail/latelyPlay" tag="li">
                  <i class="iconfont icon-zuijinbofang"></i>
                  <div class="menu-text">
                    最近播放<span>（26）</span>
                  </div>
                </router-link>
                <router-link to="detail/myDJ" tag="li">
                  <i class="iconfont icon-diantai"></i>
                  <div class="menu-text">
                    我的电台<span>（26）</span>
                  </div>
                </router-link>
                <router-link to="detail/myCollege" tag="li">
                  <i class="iconfont icon-wodeshoucang"></i>
                  <div class="menu-text">
                    我的收藏<span>（26）</span>
                    
                  </div>
                </router-link>
            </ul>
          </div>
          <div class="createdList">
              <h2>
                <i class="iconfont icon-xia"></i>我创建的课单（5）
              </h2>
              <div class="music-list">
                <ul>
                  <li v-for="(item,index) in playlist" :key="index" >
                    <div class="list-order-img">
                      <img :src="item.coverImgUrl" alt="">
                    </div>
                    <div class="list-text">
                      <div class="music-order-name">{{item.name}}</div>
                      <div class="music-count">
                        {{item.trackCount}}首
                      </div>
                    </div>
                  </li> 
                </ul>
              </div>
          </div>
      </div>
      <FooterCompoent/>
    <Loading
      @clickHandle="clickHandle"
    ></Loading>
  </div>
</template>
<script>
import HeaderCompoent from './../components/header';
import FooterCompoent from './../components/footer';
import store from './../store/index';
export default {
    data() {
        return {
            playlist: [],
            searchText: ''
        };
    },
    created() {},
    computed: {
        count() {
            return store.state.count;
        }
    },
    beforeMount() {
        this.getData();
    },
    components: {
        HeaderCompoent,
        FooterCompoent
    },
    methods: {
        getData() {
            let params = {
                uid: '603578796'
            };
            ajax
                .get({
                    url: '/user/playlist',
                    data: params
                })
                .then(res => {
                    this.playlist = res.data.playlist;
                    // console.log(res.data.playlist)
                })
                .catch(error => {
                    console.log(error);
                });
        },
        clickHandle() {
            console.log('===?>事件传递了');
        }
    }
};
</script>

